<template>
  <div
    class="hello-world"
    style="
    margin: -8px;
"
  >
    <transition name="fade">
      <swiper id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">
        <!-- 第一页 -->
        <swiper-slide class="swiper-slide1">
          <div class="page">
            <div class="container">
              <div class="background">
                <div class="box">
                  <div class="gqrm">
                    <img src="../images/gqrm.png" alt="" />
                  </div>
                  <div class="yw">INVITATION</div>
                  <div class="yqh">
                    <img src="../images/yqh.png" alt="" />
                  </div>
                  <div class="hr"></div>
                  <div class="white neir">
                    诚挚邀请您参加广汽本田高效空调滤芯助力活动
                  </div>
                  <div class="hr"></div>
                  <div class="yp">
                    <img src="../images/yp.png" alt="" />
                  </div>
                  <div class="white">
                    <div class="liaohao">料号：08D01ALLGH2 / 08D01ALLGH1</div>
                    <div class="ti">活动内容</div>
                    <div class="wenben wen">
                      活动期间，给予店端销售的广汽本田纯正用品原厂空调滤芯产品，相应的活动支持。
                    </div>
                    <div class="ti">活动时间</div>
                    <div class="wen">023年8月1日-2023年9月30日</div>
                  </div>
                  <div class="jt">
                    <img src="../images/jt.gif" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <!-- 第二页 -->
        <swiper-slide class="swiper-slide2">
          <div class="page">
            <div class="bbox" style="
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
">
              <div class="box2">
                <div class="title2">《 活 - 动 - 回 - 执 》</div>
                <div class="flex">
                  <el-form
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
                  >
                    <el-form-item prop="selectName">
                      <el-select
                        v-model="ruleForm.selectName"
                        placeholder="请选择店名"
                        :remote-method="remoteMethod"
                        :loading="loading"
                        filterable
                        remote
                      >
                        <el-option
                          v-for="item in shopCode"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="userName">
                      <el-input v-model="ruleForm.userName" placeholder="请输入姓名" ></el-input>
                      <!-- <el-input
                        v-model="ruleForm.userName"
                        placeholder="请输入姓名"
                      ></el-input> -->
                    </el-form-item>
                    <el-form-item prop="phone">
                      <el-input v-model="ruleForm.phone" placeholder="请输入电话" ></el-input>
                      <!-- <el-input
                        type="password"
                        v-model="ruleForm.phone"
                        placeholder="请输入电话"
                      ></el-input> -->
                    </el-form-item>
                    <el-form-item prop="userType">
                      <el-select
                        v-model="ruleForm.userType"
                        placeholder="请选择参与方式"
                      >
                        <el-option
                          v-for="item in userType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('ruleForm')"
                        >提交</el-button
                      >
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </transition>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { createUser, shoplistquery } from "../utils/server/requst";
export default {
  name: "index",
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        // swiper configs 所有的配置同swiper官方api配置
        notNextTick: true, //notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        direction: "vertical", //水平方向移动
        grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        slidesPerView: 1, //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
        mousewheel: false, //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
        mousewheelControl: false, //同上
        height: window.innerHeight, // 高度设置，占满设备高度
        resistanceRatio: 0, //抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
        observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: true,
        // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
        onTransitionStart(swiper) {
          console.log(swiper);
        }
      },
      ruleForm: {
        selectName: "",
        userName: "",
        phone: "",
        userType: ""
      },
      rules: {
        userName: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        selectName: [
          { required: true, message: "店名不能为空", trigger: "blur" }
        ]
      },
      userType: [
        {
          value: "0",
          label: "商城现金积分"
        },
        {
          value: "1",
          label: "现金券"
        }
      ],
      loading: false,
      shopCode: []
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    submitForm(formName) {
      createUser({
        shopCode: this.ruleForm.selectName,
        userName: this.ruleForm.userName,
        userType: this.ruleForm.userType,
        mobile: this.ruleForm.phone,
        userChannel: "0"
      }).then(res => {
        console.log(res);
      });
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handlerSearch(val) {
      shoplistquery({
        carBrand: 2,
        name: val,
        pageSize: 100
      }).then(res => {
        console.log(res);
        if (res.code == 200) {
          let datalist = res.data.list;
          if (datalist.length > 0) {
            const newlest = datalist.map(item => {
              return {
                value: item.shopCode,
                label: item.name
              };
            });
            this.shopCode = newlest;
          }
        }
      });
    },
    remoteMethod(query) {
      if (query) {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.handlerSearch(query);
        }, 200);
      } else {
        shopCode.value = [];
      }
    }
  },
  created() {},
  mounted() {
    this.handlerSearch("");
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    this.swiper.slideTo(0, 1000, false);
  }
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.swiper-wrapper {
  height: 100px;
}

.swiper-slide1 {
  background: skyblue;
}

.swiper-slide2 {
  background: yellowgreen;
}

.swiper-slide3 {
  background: blanchedalmond;
}

.bbox {
  width: 100%;
  height: 100vh;
  background: url(../images/bg.jpg) no-repeat;
  background-size: 100% auto;
  position: relative;
}
.container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.background {
  background: url(../images/bg.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed; /* 固定背景图片不随滚动而移动 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.box {
  width: 80vw;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
}
.yw {
  font-size: 1.95rem;
  font-weight: 400;
  color: #fee2a8;
  padding-top: 3.125rem;
}
.title {
  font-size: 1.875rem;
  color: #fff;
  font-weight: bold;
}
.ftitle {
  color: #fff;
  font-size: 0.625rem;
  letter-spacing: 0.25rem;
  padding-left: 1.875rem;
  font-weight: 100;
}
.gqrm img {
  width: 6.41rem;
  height: 1.31rem;
  padding-top: 1.25rem;
}
.yqh img {
  width: 15.16rem;
  height: 5.09rem;
  padding-bottom: 1.25rem;
}
.yp img {
  width: 11.31rem;
  height: 11rem;
  padding-top: 1.25rem;
  position: relative;
  left: -1.875rem;
}
.white {
  color: #fff;
}
.jt {
  text-align: center;
  padding-top: 1.875rem;
  /* position: absolute;
     bottom: 0;
     left: 50%; */
}
.jt img {
  width: 1.5rem;
  height: 3.19rem;
}
.hr {
  width: 12.91rem;
  height: 0.13rem;
  background-color: #fee2a8;
}
.neir {
  /* letter-spacing: 4px; */
  width: 12.53rem;
  height: 3.2rem;
  font-size: 18.08px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 1.5rem;
  color: #fee2a8;
}
.liaohao {
  font-size: 0.75rem;
  padding-left: 1.875rem;
  padding-bottom: 3.125rem;
}
.wenben {
  width: 17.56rem;
  height: 3.94rem;
}
.wen {
  font-size: 0.88rem;
  font-weight: 400;
  color: #fee2a8;
  letter-spacing: 0.1875rem;
}
.ti {
  width: 5.5rem;
  height: 1.41rem;
  background-color: #fee2a8;
  text-align: center;
  height: 1.41rem;
  border-radius: 1.25rem;
  color: #7b0500;
  font-weight: bold;
  margin-bottom: 1.25rem;
}
.title2 {
  border-radius: 3.125rem;
  border: 1px solid #fee2a8;
  color: #fee2a8;
  box-sizing: border-box;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  font-weight: bold;
  height: 2.5rem;
  line-height: 2.5rem;
}
/deep/ .el-input__inner {
  border: 1px solid #fee2a8  !important; 
  background: none  !important;

}

/deep/ .el-form-item__content{
  margin: 0  !important;
  text-align: center ;
}
/deep/ .el-button {
  width: 80%;
  background-color: #fee2a8;
  border: none;
  color: #fff;
  height: 2.5rem;
}

.box2{
  
}
</style>
